<template>
    <div>
<el-form label-position="right" label-width="80px" :inline="true" >
  <el-form-item label="时间范围"> 
     <el-date-picker
      v-model="value1"
    value-format='yyyy-MM-dd HH:mm:ss'
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>

      <el-form-item style="margin-left:15px">
    <el-button type="primary" @click="serchClik">查询</el-button>
  </el-form-item>
  </el-form-item>
        </el-form>

    <div id="orderchart"></div>    
    </div>
</template>

<script>
import * as echarts from 'echarts' 
import {orderTotal} from '@/apis/orders'
import { hhmmss } from "@/utils/utile"; //暴露处理时间的工具函数
    export default {
            data(){
            return{
                value1:[new Date(20020, 10, 10, 10, 10), new Date(2021, 10, 11, 10, 10)],  //时间的值
               
            }
        },
        methods:{
            reqData(){  
                orderTotal({date:JSON.stringify(this.value1)}) .then(res=>{
        //   console.log(res);
          let newList=res.data.data.map(v=>{return hhmmss(v.orderTime)})
          let data=res.data.data.map(v=>{return v.orderAmount})
        // console.log(newList);
   let myChart = echarts.init(document.getElementById('orderchart'))
myChart.setOption(
{
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['订单总量', '订单总量']
    },
    xAxis: [
        {
            type: 'category',
            data: newList,
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '订单总量',
            min: 0,
            max: 150,
            interval: 10,
        },
        {
            type: 'value',
            name: '订单总量',
            min: 0,
            max: 150,
            interval: 10,
          
        }
    ],
    series: [
        {
            name: '订单总量',
            type: 'bar',
            data:data
        },
         {
            name: '订单总量',
            type: 'line',
            yAxisIndex: 1,
            data: data
        }
    ]
}
)
           })
            },
            //点击查询
            serchClik(){
              this.reqData() 
        }},
        mounted(){
              this.reqData() 



        }
     
        
    }
</script>

<style lang="less" scoped>
#orderchart{
    width: 100%;
    height: 400px;
}

</style>